<template>
  <div class="app_content_container">
    <Breadcrumb :items="['审计日志']" />
    <div class="container_log">
      <div class="table_tool">
        <div class="flex_between_aligncenter btns">
          <div>
            <!-- <ga-cascader
            allow-clear
            :options="categoryList"
            :field-names="fieldNames"
            :style="{ width: '320px' }"
            placeholder="请选择类型"
            path-mode
            check-strictly
            @change="handleChange"
          /> -->
          </div>
          <ga-range-picker style="width: 300px" @change="onChange" />
        </div>
      </div>
      <div class="container_card" :bordered="false">
        <listCard :render-data="renderData" />
        <Pagination
          v-if="total > 0"
          :total="total"
          :page="formModel.page"
          :limit="formModel.limit"
          @pagination="handlePagination"
        />
        <ga-empty v-if="!loading && !renderData.length" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import { getAuditList } from "@/api/arch";
import useLoading from "@/hooks/loading";
// import useArch from "@/hooks/arch";
import listCard from "./list-card.vue";

const props = defineProps({
  category: {
    type: String,
    default: "",
  },
});
const generateFormModel = () => {
  return {
    search: "",
    page: 1,
    limit: 10,
    finished_time__gte: "",
    finished_time__lte: "",
  };
};
const { loading, setLoading } = useLoading(false);
const renderData = ref([
  {
    category: "aaa",
    detail: "jjjjjjj",
    operator: { chinese_name: "admin" },
    finished_time: "2025-05-16 10:10:32",
  },
  {},
  {},
  {},
]);
const total = ref(0);
const formModel = ref(generateFormModel());
// const { arch_id, app_category } = useArch();
// const fieldNames = { value: 'name', label: 'name' };

// 获取列表
// const categoryList = ref([]);
// const curApp = localStorage.getItem('application');
// const fetchCategoryList = async () => {
//   try {
//     const { data } = await getCategoryList();
//     categoryList.value = data?.category;
//     categoryList.value =  data?.filter(item => { return item.appname === curApp})?.[0]?.category
//   } catch (err) {
//     console.log(err);
//   }
// };
// 获取list
const fetchData = async () => {
  // setLoading(true);
  // try {
  //   const { data } = await getAuditList({
  //     ...formModel.value,
  //     category: props.category,
  //     resource_name: arch_id.value,
  //     "metadata.app": app_category.value,
  //   });
  //   renderData.value = data.items;
  //   total.value = data.total;
  // } finally {
  //   setLoading(false);
  // }
};
// 时间选择器
const onChange = (val) => {
  const arr = ["finished_time__gte", "finished_time__lte"];
  if (val) {
    arr.forEach((item, index) => {
      formModel.value[item] = val[index];
    });
  } else {
    arr.forEach((item) => {
      formModel.value[item] = "";
    });
  }
  fetchData();
};
const handlePagination = (val) => {
  formModel.value.page = 1;
  const { page, limit } = val;
  formModel.value.limit = Number(limit);
  formModel.value.page = Number(page);
  fetchData();
};
// 应用列表
const handleChange = (val) => {
  formModel.value.category = val ? val?.join("/") : val;
  fetchData();
};
onMounted(() => {
  // fetchData();
  // fetchCategoryList();
});
</script>

<style scoped lang="scss">
.container_log {
  padding: 0 16px;
}
:deep(.garco-empty) {
  margin-top: 30vh;
}
.table_tool {
  margin-bottom: 16px;
  color: #2c406899;
}
.container_card {
  height: calc(100vh - 239px) !important;
  overflow-y: auto;
}
</style>
